import Taro, { useEffect, useState } from "@tarojs/taro";
import { View, Text, ScrollView, Image } from "@tarojs/components";
// import { AtTabs, AtTabsPane } from "taro-ui";
import "./index.scss";
import { apiRank, crownPics, IRank, programTypeConfig } from "./config";
import { CustomRequest } from "@/utils/request";
import { CONCAT_CDN_IMAGE_ORIGIN } from "@/utils/test";

interface CustomTabsProps {
  tabs: {
    text: string;
    realText: string;
    activeClass: string;
    defaultClass: string;
  }[];
  flush: boolean
}

const lovePng = CONCAT_CDN_IMAGE_ORIGIN('/vote/love.png')

export const CustomRankList = (props: CustomTabsProps) => {

  const { flush } = props

  const [current, setCurrent] = useState(0);

  const [top, setTop] = useState(-1)

  const [data, setData] = useState<IRank[]>([])

  const [programType, setProgramType] = useState(-1)

  const handleClick = (value: number) => {
    setCurrent(value);
    setTop(0)
    setProgramType(programTypeConfig[value])
  };

  useEffect(() => {
    CustomRequest.get(apiRank, { programType }).then((res: { data: IRank[] }) => {
      if (res) {
        setData(res.data)
      }
    })

  }, [programType, flush])

  return (
    <View className="custom-rank-list">
      <View>
        <View className="wrap">
          {props.tabs &&
            props.tabs.map((item, index) => {
              return (
                <View
                  key={index}
                  className={
                    current === index ? item.activeClass : item.defaultClass
                  }
                  onClick={() => handleClick(index)}
                >
                  { current === index ? item.realText : item.text}
                </View>
              );
            })}
        </View>
      </View>
      {/* <AtTabs current={current} onClick={handleClick} tabList={[]}>
        <AtTabsPane current={current} index={0}> */}


      <View className="content">
        <View className="tips">快来为你喜欢的作品投票吧！</View>
        <View className='list'>
          <ScrollView
            style={{
              height: '70vh',
              marginTop: '20rpx',
              marginBottom: '100rpx'
            }}
            onScroll={() => {
              if (top === 0) {
                setTop(-1)
              }
            }}
            scrollY={true}
            scrollTop={top}
          // onScrollToLower={onScrollToBottom}
          >

            <View className='at-row'>
              {/**一二两个 */}
              <View className='crown-box at-col at-col-8'>
                {
                  data.slice(0, 2).map((item, index) => {
                    return (
                      <View className={`crown crown${index} at-col at-col-6`}>
                        <Image
                          src={crownPics[index]}
                          style={{ width: '100%' }}
                          mode='widthFix'
                        />
                        <Image
                          src={item.programImage.split(',')[0]}
                          style={{ width: '100rpx', height: '100rpx' }}
                          mode='scaleToFill'
                          onClick={() => {
                            Taro.previewImage({
                              current: item.programImage.split(',')[0], // 当前显示图片的http链接
                              urls: item.programImage.split(',') // 需要预览的图片http链接列表
                            })
                          }}
                          className='avatar'
                        />
                        <View className='text name'
                          onClick={() => {
                            Taro.showModal({
                              title: '作品名称',
                              content: item.programName,
                            })
                          }}
                        >{item.programName}</View>
                        <View className='text'>编号：{item.programNo}</View>
                        <View className='text lovebox'>
                          <Image src={lovePng} style={{ width: '40rpx' }} mode='widthFix' />
                          <View>票数</View>
                          <View>{item.totalVotes}</View>
                        </View>
                      </View>
                    )
                  })
                }</View>


              {/***第三个 */}
              <View className='crown-box at-col at-col-4'>
                {
                  data.slice(2, 3).map((item) => {
                    return (
                      <View className={`crown crown2 at-col at-col-12`}>
                        <Image
                          src={crownPics[2]}
                          style={{ width: '100%' }}
                          mode='widthFix'
                        />
                        <Image
                          src={item.programImage.split(',')[0]}
                          style={{ width: '100rpx', height: '100rpx' }}
                          mode='scaleToFill'
                          onClick={() => {
                            Taro.previewImage({
                              current: item.programImage.split(',')[0], // 当前显示图片的http链接
                              urls: item.programImage.split(',') // 需要预览的图片http链接列表
                            })
                          }}
                          className='avatar'
                        />
                        <View className='text name'>{item.programName}</View>
                        <View className='text'>编号：{item.programNo}</View>
                        <View className='text lovebox'>
                          <Image src={lovePng} style={{ width: '40rpx' }} mode='widthFix' />
                          <View>票数</View>
                          <View>{item.totalVotes}</View>
                        </View>                      </View>
                    )
                  })
                }

              </View>

            </View>



            {
              data.slice(3).map((item, index) => {
                return (
                  <View className='item at-row at-row__justify--between at-row__align--center'>
                    <View className='at-col at-col-1 number'>
                      <Text className='text'>{index + 4}</Text>
                    </View>
                    <View className='at-col at-col-9 title'>{item.programName}</View>
                    <View className='at-col at-col-2 title right'>{item.totalVotes}票</View>
                  </View>
                )
              })
            }
          </ScrollView>

        </View>
      </View>


      {/* </AtTabsPane> */}
      {/* <AtTabsPane current={current} index={1}>
          <View className="content">2</View>
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          <View className="content">3</View>
        </AtTabsPane>
        <AtTabsPane current={current} index={3}>
          <View className="content">4</View>
        </AtTabsPane>
        <AtTabsPane current={current} index={4}>
          <View className="content">5</View>
        </AtTabsPane> */}
      {/* </AtTabs> */}
      {/**本活动最终解释权归组委会所有 */}
      <View className='explain'>
        本活动最终解释权归组委会所有
      </View>
    </View >
  );
};
